<template>
  <view class="mask-box">
    <view class="add-task-box">
      <h3 class="box-head">添加任务箱</h3>
      <view class="box-body">
        <input
          v-model="taskTypeName"
          class="task-name"
          type="text"
          placeholder="请输入任务箱名称"
        />
        <view class="task-type-box">
          <view
            class="task-icon"
            :class="{ 'task-icon-active': index == activeIndex }"
            v-for="(item, index) in taskTypeIcons"
            :key="index"
          >
            <image
              :class="{ 'active-image': index == activeIndex }"
              :src="item.url"
              mode="widthFix"
              @click.stop="iconClick(index, item.url, item.color)"
            />
          </view>
        </view>
      </view>
      <view class="box-foot">
        <span @click.stop="closeAddTaskType">取消</span>
        <span @click.stop="submitAddTaskType">确定</span>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    isShowAddTaskType: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 图标地址
      taskTypeIcons: [
        {
          url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/cb0cb9ea-414b-48ab-8cf6-8bd078fc8d81.png",
          color: "#666EE8",
        },
        {
          url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/f6ff8478-881d-4f58-90ec-a7753e92c0ff.png",
          color: "#28D094",
        },
        {
          url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/daa52095-2f1a-4769-8892-4d29980cfed0.png",
          color: "#FFC71C",
        },
        {
          url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/1d50b57b-8cfb-43b3-9d32-d20e4e57f73c.png",
          color: "#FF6262",
        },
        {
          url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/1b7b81eb-f55b-41be-8447-a786a29a6077.png",
          color: "#1E9FF2",
        },
        {
          url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/d2ab3905-b673-408c-a2c1-85e432ee9d95.png",
          color: "#ff9999",
        },
        {
          url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/779efd40-d489-4ee3-95df-2d45820f2b52.png",
          color: "#cccccc",
        },
        {
          url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/216cafa4-cc5e-4fe9-9c8d-e13f3ee32b3f.png",
          color: "#993399",
        },
        {
          url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/3c50d857-c475-4e67-a8c5-875f11523c54.png",
          color: "#33ff99",
        },
        {
          url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/47a37172-09f1-43cb-a9aa-f855910519dc.png",
          color: "#0066ff",
        },
        {
          url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/9dbb052a-d0a3-40ee-93fc-61cfe8f83335.png",
          color: "#00ccff",
        },
        {
          url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9d57514b-4404-46e1-9760-8991b85dbc25/881ccc1a-fad3-4eff-b89d-a4e10a9ec675.png",
          color: "#ffccff",
        },
      ],
      // 选中的图标
      activeIndex: -1,
      // 选中的颜色
      activeColor: "",
      // 任务分类名称
      taskTypeName: "",
    };
  },
  created() {},
  methods: {
    iconClick(index, url, color) {
      this.activeIndex = index;
      this.iconUrl = url;
      this.activeColor = color;
    },
    closeAddTaskType() {
      this.$emit("closeAddTaskType");
    },
    submitAddTaskType() {
      if (this.taskTypeName == "")
        return uni.showToast({ title: "请输入任务分类名称！", icon: "none" });
      if (this.activeIndex == -1)
        return uni.showToast({ title: "请选择任务分类类型！", icon: "none" });

      let params = {
        text: this.taskTypeName,
        icon: `${this.iconUrl},${this.activeColor}`,
        label: "",
        code: uni.getStorageSync("openId"),
      };

      this.$emit("submitAddTaskType", params);
    },
  },
};
</script>

<style lang="scss" scoped>
.mask-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 28rpx;
  font-weight: Medium;
  z-index: 9999;

  .add-task-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84%;
    background-color: #fff;
    border-radius: 8rpx;
    box-shadow: -10rpx 10rpx 20rpx rgba(0, 0, 0, 0.4);
    transform: translate(-50%, -50%);

    .box-head {
      padding-top: 40rpx;
      text-align: center;
      color: #333;
      font-size: 32rpx;
    }

    .box-body {
      flex: 1;
      padding: 30rpx 40rpx;
      margin-bottom: 10rpx;

      .task-name {
        box-sizing: border-box;
        width: 100%;
        height: 72rpx;
        padding: 16rpx 20rpx;
        border: 2rpx solid #ccc;
        border-radius: 8rpx;
        font-size: 28rpx;
      }

      .task-type-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .task-icon-active {
          border-radius: 50%;
          border: 2rpx solid #666ee8;
        }

        .active-image {
          transform: scale(0.8);
        }

        .task-icon {
          width: 50rpx;
          height: 50rpx;
          margin-top: 40rpx;
          margin-right: 9%;

          &:nth-child(6) {
            margin-right: 0;
          }
          &:nth-child(12) {
            margin-right: 0;
          }
        }
      }
    }

    .box-foot {
      position: relative;
      width: 100%;
      height: 100rpx;
      border-top: 2rpx solid #f2f2f2;

      &::after {
        content: "";
        position: absolute;
        left: 49%;
        width: 2rpx;
        height: 100%;
        background-color: #f2f2f2;
      }

      & > span {
        display: inline-block;
        width: 50%;
        text-align: center;
        line-height: 100rpx;
        font-size: 28rpx;

        &:last-child {
          color: #666ee8;
        }
      }
    }
  }
}
</style>
